{extend name="common@base/common" /}

{block name="style"}
<link href="__CSS__/main.min.css" rel="stylesheet" type="text/css"/>
{/block}

{block name="body"}
<div class="container">
  <ol class="breadcrumb">
      <li><a href="{:url('index/index')}">演示首页</a></li>
      <li>表格</li>
  </ol>
<section class="demo-section">
<div id="pageContent">




<section><header><h3>基本类型</h3></header><article><div class="example">
  <table class="table">
    <thead>
      <tr>
        <th class="col-md-2">名称</th>
        <th>描述</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>表头 <code>&lt;thead&gt;</code></td>
        <td>
        一般表格的第一行作为表头，用于描述表中每一列数据名称。为区别于表格其他行，表头具备不同的样式，例如字体加粗等。在垂直显示一组数据的表格中，表头也可能是垂直的第一列，而不是行。</td>
      </tr>
      <tr>
        <td>内容 <code>&lt;tbody&gt;</code></td>
        <td>
        一般内容会在单元格内靠左对齐，对于数字可能靠右对齐比较好。在一些表格中，内容可以按单元格选择或者按行选择，选中的部分会以不同的样式区分。为了使得行与行便于区分，通常也会使得行交替使用不同的背景色。图片或其他控件也可以应用单元格中。</td>
      </tr>
      <tr>
        <td>表尾 <code>&lt;tfoot&gt;</code></td>
        <td>与表头作用相同，或者用来放置与表相关补充数据或操作。</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th>名称</th>
        <th>描述</th>
      </tr>
    </tfoot>
  </table>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;table</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"table"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;thead&gt;</span><span class="pln">
    </span><span class="tag">&lt;tr&gt;</span><span class="pln">
      </span><span class="tag">&lt;th&gt;</span><span class="pln">...</span><span class="tag">&lt;/th&gt;</span><span class="pln">
      </span><span class="tag">&lt;th&gt;</span><span class="pln">...</span><span class="tag">&lt;/th&gt;</span><span class="pln">
    </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
  </span><span class="tag">&lt;/thead&gt;</span><span class="pln">
  </span><span class="tag">&lt;tbody&gt;</span><span class="pln">
    </span><span class="tag">&lt;tr&gt;</span><span class="pln">
      </span><span class="tag">&lt;td&gt;</span><span class="pln">...</span><span class="tag">&lt;/td&gt;</span><span class="pln">
      </span><span class="tag">&lt;td&gt;</span><span class="pln">...</span><span class="tag">&lt;/td&gt;</span><span class="pln">
    </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
    </span><span class="tag">&lt;tr&gt;</span><span class="pln">
      </span><span class="tag">&lt;td&gt;</span><span class="pln">...</span><span class="tag">&lt;/td&gt;</span><span class="pln">
      </span><span class="tag">&lt;td&gt;</span><span class="pln">...</span><span class="tag">&lt;/td&gt;</span><span class="pln">
    </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
  </span><span class="tag">&lt;/tbody&gt;</span><span class="pln">
  </span><span class="tag">&lt;tfoot&gt;</span><span class="pln">
    </span><span class="tag">&lt;tr&gt;</span><span class="pln">
      </span><span class="tag">&lt;td&gt;</span><span class="pln">...</span><span class="tag">&lt;/td&gt;</span><span class="pln">
      </span><span class="tag">&lt;td&gt;</span><span class="pln">...</span><span class="tag">&lt;/td&gt;</span><span class="pln">
    </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
  </span><span class="tag">&lt;/tfoot&gt;</span><span class="pln">
</span><span class="tag">&lt;/table&gt;</span></code></pre></article></section>




<section><header><h3>隔行交替样式</h3></header><article><p><code>.table-striped</code></p><div class="example">
  <table class="table table-striped">
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Sunshine</td>
        <td>Sunday</td>
        <td>catouse</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Sunday</td>
        <td>Sunshine</td>
        <td>catouse</td>
      </tr>
      <tr>
        <td>2</td>
        <td>catouse</td>
        <td>azhi</td>
        <td>zenUI</td>
      </tr>
      <tr>
        <td>3</td>
        <td>God</td>
        <td>Lady Gaga</td>
        <td>catouse</td>
      </tr>
    </tbody>
  </table>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;table</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"table table-striped"</span><span class="tag">&gt;</span><span class="pln">
  ...
</span><span class="tag">&lt;/table&gt;</span></code></pre></article></section>




<section><header><h3>响应鼠标悬停</h3></header><article><p><code>.table-hover</code></p><div class="example">
  <table class="table table-hover">
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Sunshine</td>
        <td>Sunday</td>
        <td>catouse</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Sunday</td>
        <td>Sunshine</td>
        <td>catouse</td>
      </tr>
      <tr>
        <td>2</td>
        <td>catouse</td>
        <td>azhi</td>
        <td>zenUI</td>
      </tr>
      <tr>
        <td>3</td>
        <td>God</td>
        <td>Lady Gaga</td>
        <td>catouse</td>
      </tr>
    </tbody>
  </table>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;table</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"table table-hover"</span><span class="tag">&gt;</span><span class="pln">
  ...
</span><span class="tag">&lt;/table&gt;</span></code></pre></article></section>



<section><header><h3>带所有边框的表格</h3></header><article><p><code>.table-bordered</code></p><div class="example">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Sunshine</td>
        <td>Sunday</td>
        <td>catouse</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Sunday</td>
        <td>Sunshine</td>
        <td>catouse</td>
      </tr>
      <tr>
        <td>2</td>
        <td>catouse</td>
        <td>azhi</td>
        <td>zenUI</td>
      </tr>
      <tr>
        <td>3</td>
        <td>God</td>
        <td>Lady Gaga</td>
        <td>catouse</td>
      </tr>
    </tbody>
  </table>
  <pre class="prettyprint prettyprinted" style=""><code><span class="tag">&lt;table</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"table </span><em><span class="atv">table-bordered</span></em><span class="atv">"</span><span class="tag">&gt;</span><span class="pln">
...
</span><span class="tag">&lt;/table&gt;</span></code></pre>
</div></article></section>



<section><header><h3>不带边框的表格</h3></header><article><p><code>.table-borderless</code></p><div class="example">
  <table class="table table-borderless">
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Sunshine</td>
        <td>Sunday</td>
        <td>catouse</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Sunday</td>
        <td>Sunshine</td>
        <td>catouse</td>
      </tr>
      <tr>
        <td>2</td>
        <td>catouse</td>
        <td>azhi</td>
        <td>zenUI</td>
      </tr>
      <tr>
        <td>3</td>
        <td>God</td>
        <td>Lady Gaga</td>
        <td>catouse</td>
      </tr>
    </tbody>
  </table>
  <pre class="prettyprint prettyprinted" style=""><code><span class="tag">&lt;table</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"table </span><em><span class="atv">table-borderless</span></em><span class="atv">"</span><span class="tag">&gt;</span><span class="pln">
...
</span><span class="tag">&lt;/table&gt;</span></code></pre>
</div></article></section>





<section><header><h3>自动宽度的表格</h3></header><article><p><code>.table-auto</code></p><p>将表格的宽度设置为 <code>auto</code>，但最大宽度不超过 <code>100%</code>。</p><div class="example">
  <table class="table table-auto">
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>catouse</td>
        <td>hello</td>
        <td>world</td>
      </tr>
      <tr>
        <td>2</td>
        <td>jay</td>
        <td>thks</td>
        <td>jajaja</td>
      </tr>
      <tr>
        <td>3</td>
        <td>JK row</td>
        <td>thks</td>
        <td>Pa</td>
      </tr>
    </tbody>
  </table>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;table</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"table table-auto"</span><span class="tag">&gt;</span><span class="pln">
  ...
</span><span class="tag">&lt;/table&gt;</span></code></pre></article></section>




<section><header><h3>更为紧凑的表格</h3></header><article><p><code>.table-condensed</code></p><div class="example">
  <table class="table table-condensed">
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>catouse</td>
        <td>hello</td>
        <td>world</td>
      </tr>
      <tr>
        <td>2</td>
        <td>jay</td>
        <td>thks</td>
        <td>jajaja</td>
      </tr>
      <tr>
        <td>3</td>
        <td>JK row</td>
        <td>thks</td>
        <td>Pa</td>
      </tr>
    </tbody>
  </table>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;table</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"table table-condensed"</span><span class="tag">&gt;</span><span class="pln">
  ...
</span><span class="tag">&lt;/table&gt;</span></code></pre></article></section>






<section><header><h3>固定布局的表格</h3></header><article><p><code>.table-fixed</code></p><p>将表格的 <code>table-layout</code> 属性设置为 <code>fixed</code>。</p><p>在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。</p><div class="example">
  <table class="table table-fixed">
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>catouse</td>
        <td>hello</td>
        <td>world</td>
      </tr>
      <tr>
        <td>2</td>
        <td>jay</td>
        <td>thks</td>
        <td>jajaja</td>
      </tr>
      <tr>
        <td>3</td>
        <td>JK row</td>
        <td>thks</td>
        <td>Pa</td>
      </tr>
    </tbody>
  </table>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;table</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"table table-fixed"</span><span class="tag">&gt;</span><span class="pln">
  ...
</span><span class="tag">&lt;/table&gt;</span></code></pre></article></section>




<section><header><h3>色彩主题</h3></header><article><p>可以根据语义标记整行或者某一单元格</p><div class="example">
  <table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>描述</th>
        <th>Payment Taken</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      <tr class="success">
        <td>1</td>
        <td>表示成功或积极的行为。</td>
        <td>01/04/2012</td>
        <td>Approved</td>
      </tr>
      <tr class="danger">
        <td>2</td>
        <td>表示一个危险或存有潜在危险的行为。</td>
        <td>02/04/2012</td>
        <td>Declined</td>
      </tr>
      <tr class="warning">
        <td>3</td>
        <td>表示警告，可能需要注意。</td>
        <td>03/04/2012</td>
        <td>Pending</td>
      </tr>
      <tr class="active">
        <td>4</td>
        <td>标记为激活行。</td>
        <td>04/04/2012</td>
        <td>Call in to confirm</td>
      </tr>
    </tbody>
  </table>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;table</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"table"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;tbody&gt;</span><span class="pln">
    </span><span class="tag">&lt;tr</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"success"</span><span class="tag">&gt;</span><span class="pln">
      ...
    </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
    </span><span class="tag">&lt;tr</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"danger"</span><span class="tag">&gt;</span><span class="pln">
      ...
    </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
    </span><span class="tag">&lt;tr</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"warning"</span><span class="tag">&gt;</span><span class="pln">
      ...
    </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
    </span><span class="tag">&lt;tr</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"active"</span><span class="tag">&gt;</span><span class="pln">
      ...
    </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
  </span><span class="tag">&lt;/tbody&gt;</span><span class="pln">
</span><span class="tag">&lt;/table&gt;</span></code></pre></article></section>

<section><header><h3>响应式表格</h3></header><article><p>将 <code>.table</code> 包裹在 <code>.table-responsive</code> 容器元素内即可实现响应式表格。当设备屏幕宽度小于 <code>768px</code> 时，表格内容会禁用换行，当宽度不够时，允许在水平方向上进行滚动以浏览所有列。</p><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"table-responsive"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;table</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"table"</span><span class="tag">&gt;</span><span class="pln">
    ...
  </span><span class="tag">&lt;/table&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre></article></section></div>
</section>
{/block}